<template>
    <div class="formd">
        <div class="question">
            <el-form>
                <el-form-item v-for="(parent_subject,index) in subject" name="parent_subject.number"
                    :key=parent_subject.number>
                    <!-- <el-form-item name="subject1"></el-form-item> -->
                    <!-- 题目 -->
                    <div class="test_box">
                        <div class="ques">{{parent_subject.number}}、 {{parent_subject.ques}}</div>
                        <div class="check">
                            <img src="./../assets/对@2x.png" alt="correct" class="correct"
                                v-if='detail[parent_subject.number-1]'>
                            <img src="./../assets/错@2x.png" alt="false" class="false" v-else>
                        </div>
                    </div>
                    <!-- 多选题选项 -->
                    <el-checkbox-group id='selection' disabled>
                        <el-checkbox-button id='item' :label=option.label v-for="option in parent_subject.options"
                            :key='option.label'>
                            <div class="icon">
                                <img v-if="checked(option.label,index)? 0:1" src="../assets/Oval@2x.png" alt="">
                                <img v-else src="../assets/选中@2x.png" alt="">
                            </div>
                            {{option.label}}、 {{option.text}}
                            <br>
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>

        </div>

    </div>

</template>
<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                subject: '',
                test_num: '', //题目总数
                detail: [],
                radio: [
                    []
                ]
            };
        },
        created: function () {
            axios.get('http://localhost:3000/parent_subject_list').then((data) => {
                this.subject = data.data.subject
                this.test_num = data.data.test_num
                console.log(data.data);
            }).catch(err => {
                console.error(err);
            })
            let name = sessionStorage.getItem('user_name')
            axios.get('http://localhost:3000/users').then((data) => {
                // this.result = data.data[name]
                this.radio = data.data[name].radio
                this.detail = data.data[name].detail
                console.log(this.radio);
                console.log(this.detail );
            }).catch(err => {
                console.error(err);
            })

        },
        methods: {
            checked(value, index) {
                for (let i in this.radio[index]) {
                    // console.log(index);
                    if (this.radio[index][i] === value) {
                        return 1;
                    }

                }
                return 0;
            }
        }
    }
</script>

<style>
    .question #selection {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .question #selection #item {
        margin: 20px;
        display: flex;
        flex-direction: row;


    }

    .question #selection #item .el-checkbox-button__inner {
        width: 600px;
        height: 80px;
        text-align: left;
        line-height: 70px;
    }

    .question #selection #item .el-checkbox-button__original {
        display: none;
    }

    .question #selection #item .icon {
        float: left;
    }

    .ques {
        text-align: left;
    }

    .test_box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .test_box .ques {
        display: inline-block;

    }

    .test_box .check {
        display: inline-block;
    }

    .test_box .check img {
        width: 40px;
        height: 40px;

    }
</style>